<template>
	<div class="asideComp">
		<channelsSearch></channelsSearch> <!-- 这个是channelsSearch频道搜索组件 -->
		<TitleMenu :isActive="activeId === 100" @active="activeId = 100">
			<template v-slot:title>
				<!-- v-slot:title是将这里的值传给TitleMenu中名为title的插槽 -->
				发现频道
			</template>
			<template v-slot:icon>
				<!-- v-slot:icon是将这里的值传给TitleMenu中名为icon的插槽 -->
				>
			</template>
		</TitleMenu>
		<!-- <Channel :data="{name:'动漫',channel_count:'222'}"></Channel> -->
		<!-- 首先接收子组件传来的事件，将activeId数据传递给子组件进行判断 -->
		<channelList :columns="2" :activeId="activeId" @active="activeId = $event"></channelList>
	</div>
</template>

<script>
	// 关系：App-->TitleMenu-->Item
	import TitleMenu from './TitleMenu.vue'
	import channelList from './channelList.vue'
	import channelsSearch from './channelsSearch.vue'
	// import Channel from './components/channel.vue'
	export default {
		components: {
			TitleMenu,
			channelList,
			channelsSearch
			// Channel,
		},
		// methods:{
		// 	handleSearch(e){
		// 		// 这里的e是接收到search.vue传过来的值，也就是input中输出搜索的值，并将其打印出来测试
		// 		console.log("执行了一次搜索",e)
		// 	}
		// },
		data() {
			return {
				select: false, //true或者false赋值的时候不能加引号，否则会报错
				activeId: 100
			}
		}
	}
</script>


<style scoped>
	.asideComp{
		width: 100%;
		height: 100%;
		overflow: auto;
		/* 溢出部分自动添加滚动条 */
	}
</style>
